<template>
  <div class="cart">
    <navbar class="nav-bar">
      <template v-slot:center>
        <div style="font-size: 0.5rem;font-weight: 500;">购物车</div>
      </template>
    </navbar>

    <!-- 购物商品卡片 -->
    <div>
      <div id="shop-item" v-for="(item, index) in catrgoods" :key="index">
        <div class="flex-center">
          <input type="radio" :checked="item.checked">
        </div>

        <div class="item-img" @click="ischeck(item)">
          <img :src="item.image" alt="商品图片">
        </div>

        <div class="item-info">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">商品描述: {{ item.desc }}</div>

          <div class="info-bottom">
            <div class="item-price left">¥{{ item.price }}</div>
            <div class="item-count right">
              <button class="bu" @click="jian(item)">-</button>
              x{{ item.count }}
              <button class="bu" @click="jia(item)">+</button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 底部栏 -->
    <div style="height: 1.5rem;width: 100%;background-color: #fff;position: fixed;bottom:2.2667rem;left: 0;">
      <van-submit-bar :price="data.zong*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="isall" @click="isallclick">全选</van-checkbox>
      </van-submit-bar>
    </div>

    <!-- 密码框 -->
    <van-popup v-model:show="data.showpassword" closeable round position="bottom"
      :style="{ height: '55%', width: '100%' }">

      <div class="flex-center" style="margin: 20px 0px;font-size: 20px;font-weight: 600;">请输入密码</div>
      <div class="flex-center" style="margin: 20px 0px;font-size: 16px;color: red;">需支付￥{{ data.zong }}</div>
      <!-- 密码输入框 -->
      <van-password-input :value="data.value" />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="data.value" :show="data.showKeyboard" />
    </van-popup>


  </div>
</template>

<script setup>
import { reactive, computed, watch, provide, inject,onUpdated } from 'vue'
import navbar from '../../components/navbar.vue'
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant';
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
const route = useRoute()
const router = useRouter()

let data = reactive({
  isall: false,
  zong: 0,
  showpassword: false,
  value: '',
  showKeyboard: true
})

let catrgoods = computed(() => {
  return store.getters.getcartgoods
})

let jia = (item) => {
  store.commit('jiacount', item)
}
let jian = (item) => {
  store.commit('jiancount', item)
}

let ischeck = (item) => {
  store.commit('ischeck', item)

}

let isallclick = () => {
  let isselect = store.getters.getcartgoods.find(item => item.checked === false)
  if (isselect) {
    store.commit('carttrue')
  }
  else {
    store.commit('cartfalse')
  }
}

let isall = computed(() => {
  return store.getters.getcartgoods.find(res => res.checked === false) === undefined
})

let allprice= () => {
  const cartList = store.getters.getcartgoods;
  return cartList.filter(item => {
    return item.checked
  }).reduce((preValue, item) => {
    return preValue + parseFloat(item.count) * parseFloat(item.price)
  }, 0)
}
data.zong=allprice()
console.log('data.zong', data.zong);

onUpdated(() => {
  data.zong=allprice()
})



// 提交按钮
let onSubmit = () => {
  const buycartList = store.getters.getcartgoods.filter(item => {
    return item.checked
  });
  console.log('buycart', buycartList);
  if (buycartList.length > 0) {
    data.value = ''
    data.showpassword = true
    data.showKeyboard = true
  }
}



watch(() => data.value, (newValue, oldValue) => {
  console.log('密码变化了', newValue, oldValue)
  if (newValue.length === 6 && newValue === '111111') {
    // 清空选中商品购物车
    succcessbuy()
  }
  if (newValue.length === 6 && newValue !== '111111') {
    Toast.fail('密码错误');
    data.value = ''
  }
})

let succcessbuy = () => {
  store.commit('clearcart')
  data.showpassword = false
  Toast.success('购买成功');
  store.commit('updatebuymoney', data.zong)
  setTimeout(() => {
    // 跳转我的账单
    router.replace('/buygoodscart')
  }, 1000)
}

// watch(() => data.zong, (newValue, oldValue) => {
//   console.log('总金额变化了', newValue, oldValue)
//     // 把总金额加进去
//     store.commit('updatebuymoney', newValue)
// },{immediate:true})



</script>

<style scoped>
.cart {
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

.delete-button {
  height: 100%;
}

#shop-item {
  width: 100%;
  display: flex;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.bu {
  width: 20px;
  height: 25px;

}

.van-submit-bar {
  bottom: 2.0033rem;
}

.shou {
  display: flex;
  margin-left: 15px;
  margin-top: 15px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;

}

.item-selector {
  width: 14%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-title,
.item-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-img {
  padding: 5px;
  /*border: 1px solid #ccc;*/
}

.item-img img {
  width: 80px;
  height: 100px;
  display: block;
  border-radius: 5px;
}

.item-info {
  font-size: 17px;
  color: #333;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
}

.item-info .item-desc {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

.info-bottom {
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.info-bottom .item-price {
  color: orangered;
}
</style>